import React, { ReactElement } from 'react';
import { View, Image } from 'react-native';

import styles from './style';
import { spuTag } from '../../../../../../../../constant/resource';
import CustomText from '../../../../../../../../components/Text';
import { Commodity } from '../../../../../../../../api/course/getDiscoveryPage';
import Spu from '../Spu';
import { CommodityType } from '../../../../constant';

export default ({
  list,
  desc
}: {
  list: Commodity[];
  desc: string;
}): ReactElement => {
  if (list && list.length === 0) return <View />;

  return (
    <View>
      <View style={styles.loadTitle}>
        <Image source={spuTag} style={styles.spuTag} />
        <CustomText style={styles.title} numberOfLines={1}>
          {desc}
        </CustomText>
      </View>
      {list.map(
        (item): ReactElement => (
          <Spu key={item.id} {...item} type={CommodityType.Demo} />
        )
      )}
    </View>
  );
};
